import React from 'react'
import LineChat from './LineChat'
import {connect} from 'react-redux'

import './index.scss'

class LeftCon extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      statisticsList: [
        {
          num: 58,
          name: '居委',
        },
        {
          num: 146,
          name: '小区',
        },
        {
          num: 23,
          name: '垃圾厢房',
        },
        {
          num: 45,
          name: '摄像头',
        },
        {
          num: 2,
          name: '告警垃圾箱',
        },
        {
          num: 345,
          name: '告警工单',
        },
      ],
      rankingList: [
        {
          name: '莲溪八居',
          num: 20,
        },
        {
          name: '振东一居',
          num: 12,
        },
        {
          name: '大华六居',
          num: 9,
        },
        {
          name: '御桥一居',
          num: 7,
        },
        {
          name: '绿川三居',
          num: 1,
        },
      ]
    }
  }
  componentDidMount() {
    this.props.getBaseInfo()
  }
  render() {
    let statisticsUl = this.state.statisticsList.map(item=> {
      return (
        <li className="item" key={item.name}>
          <div className="num"><span className="num-txt">{item.num}</span>个</div>
          <div className="name">{item.name}</div>
        </li>
      )
    })
    let rankingUl = this.state.rankingList.map((item, index)=> {
      return (
        <li className={`ranking-item ranking-item-${index}`} key={item.name}>
          <span className="index">Top{index + 1}</span>
          <span className="name">{item.name}</span>
          <span className="num">{item.num}</span>
        </li>
      )
    })
    return (
      <>
        <div className="time-contianer cell">
          <div className="time">13:20:33</div>
          <div className="date-box">
            <span className="date">2020-04-21</span>
            <span className="week">星期二</span>
          </div>
        </div>
        <div className="cell statistics-container">
          <div className="cell-title-box">
            <div className="title"><span className="title-icon"></span>北蔡新村垃圾分类统计</div>
          </div>
          <ul className="statistics-ul">
            {/* <li>
              <div className="num"><span className="num-txt">22</span>个</div>
              <div className="name">垃圾箱房</div>
            </li> */}
            {statisticsUl}
          </ul>
        </div>
        <div className="cell ranking-container">
          <div className="cell-title-box">
            <div className="title"><span className="title-icon"></span>小区工单易发点排名</div>
            <div className="tab">
              <span className="tab-item selected">日</span>
              <span className="tab-item">周</span>
              <span className="tab-item">月</span>
            </div>
          </div>
          <ul className="ranking-ul">
            {rankingUl}
          </ul>
        </div>
        <div className="cell often-container">
          <div className="cell-title-box">
            <div className="title"><span className="title-icon"></span>告警高发时段工单数</div>
            <div className="tab">
              <span className="tab-item selected">日</span>
              <span className="tab-item">周</span>
              <span className="tab-item">月</span>
            </div>
          </div>
          <div className="d">
            <LineChat></LineChat>
          </div>
        </div>
      </>
    )
  }
}

const stateToProps = (state) => {
  return {
    baseInfoList: state.baseInfoList
  }
}
const dispatchToProps = (dispatch)=> {
  return {
    getBaseInfo: function() {
      dispatch({
        type: 'getBaseInfo'
      })
    }
  }
}
export default connect(stateToProps, dispatchToProps)(LeftCon);